<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><i class="fa fa-list"></i> To Do List &nbsp;<span class="badge">{{list.length}} item</span></h3>
  </div>
  <div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <form (submit)="addTodo()" #todoForm="ngForm">
                    <label for="todo">To Do</label>
                    <span [hidden]="todo.name" class="badge badge-warning">Required</span>
                    <div class="form-inline">
                        <input required [(ngModel)]="todo.name" id="todo" name="todoName" type="text" class="form-control" size="50">
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                    <label><input type="checkbox" [(ngModel)]="showCompleted" name="todoCompleted"> show completed</label>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <ul class="list-group">
                <li *ngFor="let todo of (list | appCompletedFilter:showCompleted); let i=index" class="list-group-item">
                <span title="Remove todo" class="badge" (click)="delTodo(i) ">x</span>
                <label><input type="checkbox" [(ngModel)]="todo.done" name="todoDone"> {{todo.name}}</label>
                </li>
            </ul>
        </div>
    </div>
  </div>
</div>
